<template>
  <div class="FGSM">
    <div class="form">
      <el-form
          ref="formdata"
          :model="formdata"
          :rules="rules"
          class="demo-ruleForm">
        <div class="form_title">FGSM算法</div>
        <el-form-item label="eps值" prop="eps">
          <el-input v-model.number="formdata.eps">{{ formdata.eps }}</el-input>
        </el-form-item>
        <el-form-item label="模型" prop="model">
          <!-- {{formdata.model}} -->
          <el-select v-model="formdata.model" placeholder="请选择模型">
            <el-option label="VGG" value="VGG"></el-option>
            <el-option label="ResNet" value="ResNet"></el-option>
            <el-option label="mobileNet" value="mobileNet"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据集" prop="dataset">
          <!-- {{formdata.dataset}} -->
          <el-select v-model="formdata.dataset" placeholder="请选择数据集">
            <el-option label="CH2_DATA" value="CH2_DATA"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="输出文件名" prop="out_path">
          <!-- {{formdata.out_path}} -->
          <el-input v-model="formdata.out_path"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormdata('formdata')">提交</el-button>
          <el-button type="danger" @click="resetFormdata('formdata')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="imgDiv">
      <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon></el-alert>
      <!-- 这里往下就是展示区了 -->
      <el-divider>对抗样本效果展示</el-divider>
      <!-- 首先展示的是文件的输出路径 -->
      <template v-if="formdata.gen_path">
        <div class="gen">
          对抗样本生成路径：{{ formdata.gen_path }}
        </div>
      </template>
      <ShowImg :name="'FGSM'" :modeling="formdata"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ShowImg from './div_level/ShowImg.vue'
import {addSessionStorage} from '../assets/js/utils'

export default {
  name: 'FGSMTable',
  components: {ShowImg},
  data() {
    return {
      formdata: {
        eps: 8 / 255,
        model: '',
        dataset: '',
        out_path: '',
        gen_path: ''
      },
      authFunction: [
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "对抗样本介绍"
          },
          "secondClassificationVO": null,
          "thirdClassificationVO": null,
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "FGSM"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "FGSM"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "PGD"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "PGD"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "DeepFool"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "DeepFool"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "CW"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "白盒测试"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "CW"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },



        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "黑盒攻击"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "SimBA"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "黑盒攻击"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "SimBA"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "黑盒攻击"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "BA"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "提交操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "黑盒攻击"
          },
          "secondClassificationVO": {
            "key": "view",
            "text": "BA"
          },
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "测试"
          },
          "secondClassificationVO":null,
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
        {
          "firstClassificationVO": {
            "key": "cluster",
            "text": "测试"
          },
          "secondClassificationVO":null,
          "thirdClassificationVO": {
            "key": "node",
            "text": "重置操作"
          },
          "fourthClassificationVO": null
        },
          ],
      rules: {
        //eps名字必须与上面eps一样，泪目，学艺不精
        eps: [
          {required: true, message: '请输入eps值'},
          {type: 'number', message: 'eps值必须为数字'}
        ],
        model: [
          {required: true, message: '请选择模型', trigger: 'change'}
        ],
        dataset: [
          {required: true, message: '请选择数据集', trigger: 'change'}
        ],
        out_path: [
          {required: false, message: '请输入输出文件夹名称，否则系统默认命名'},
        ]
      },
      errorMessage: '',
      images: []
      // fileList:null
    }
  },
  methods: {
    submitFormdata(Formname) {

      this.$refs[Formname].validate(
          (valid, unpass) => {
            if (valid) {
              this.errorMessage = ''
              //loading 组件（服务方式）
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              // setTimeout(()=>{loading.close()},2000)
              //加‘/’代表绝对路径
              axios.post('/api/wbt/fgsm', {
                parameter: {
                  eps: this.formdata.eps
                },
                model: this.formdata.model,
                dataset: this.formdata.dataset,
                out_path: this.formdata.out_path
              }).then(
                  res => {
                    loading.close()
                    this.formdata.gen_path = res.data.gen_path
                    // sessionStorage.setItem('FSGM',JSON.stringify(
                    //     {
                    //         gen_path : this.formdata.gen_path
                    //     }
                    // ))
                    addSessionStorage('FGSM', JSON.stringify(
                        {
                          gen_path: this.formdata.gen_path
                        }
                    ))
                    //  测试get_images
                    // axios.post('/api/wbt/get_images',{
                    //   img_dir: this.formdata.gen_path
                    // }).then(
                    //     res => {
                    //       console.log(res.data)
                    //     }
                    // )
                    //  测试get_images

                    this.images = res.data.image
                    //当images改变，使用全局事件总线进行emit
                    this.$bus.$emit('img_pass', this.images)
                    sessionStorage.setItem('FGSM_Table', JSON.stringify({
                      formdata: this.formdata,
                      images: this.images
                    }))
                    this.$DailyRecord(res.data.status == 200?'操作成功':'操作失败','FGSM',this.formdata)

                    // console.log(this.images)
                    // console.log(JSON.stringify(res));
                    // alert(JSON.stringify(res));
                  }
              )
            } else {
              let messages = Object.keys(unpass).map(key => {
                return unpass[key][0].message;
              }).join('<br>')
              this.$notify({
                title: '提示',
                message: messages,
                offset: 120,
                type: 'warning',
                dangerouslyUseHTMLString: true
              })
            }
          }
      )
    },
    resetFormdata(Formname) {
      //返回初始状态
      this.$refs[Formname].resetFields()
      this.formdata.gen_path = ''
      this.images = []
      //同上，进行emit
      this.$bus.$emit('img_pass', this.images)
      sessionStorage.setItem('FGSM_Table', JSON.stringify({
        formdata: this.formdata,
        images: this.images
      }))
    }
  },
  mounted() {
    try {
      this.images = JSON.parse(sessionStorage.getItem('FGSM_Table')).images || []
      this.$bus.$emit('img_pass', this.images)
      this.formdata = JSON.parse(sessionStorage.getItem('FGSM_Table')).formdata || {
        deepfool_overshoot: 0.02,
        deepfool_steps: 100,
        model: '',
        dataset: '',
        out_path: '',
        gen_path: ''
      }
      // this.formdata = JSON.parse(sessionStorage.getItem('DeepFool_Table')).formdata
      // console.log(JSON.stringify(this.images))
      // console.log(JSON.stringify(this.formdata))
    } catch (e) {
      console.log('mounted 没有找到数据')
      this.images = [];
      this.$bus.$emit('img_pass', this.images)
      this.formdata = {
        eps: 8 / 255,
        model: '',
        dataset: '',
        out_path: '',
        gen_path: ''
      }
    }
  }
}
</script>
<style scoped>
@import url('../assets/css/wbt_form.css');

.FGSM {
  margin: 10vh;
  width: 100vh;
  margin: 0 auto;
}

</style>
